<app-node-detail [(showInfoModal)]=showDetail></app-node-detail>
<clr-datagrid [clrDgLoading]="loading">
  <clr-dg-action-bar>
    <div class="btn-group">
      <button type="button" class="btn btn-sm btn-secondary" (click)="syncTime()" [disabled]="currentCluster.status==='SCALING' || currentCluster.status==='INSTALLING' || permission==='VIEWER'">
        <clr-icon shape="sync" size="16"></clr-icon>
        节点时间校验
      </button>
      <button type="button" class="btn btn-sm btn-secondary" (click)="checkNodes()" [disabled]="currentCluster.status==='SCALING' || currentCluster.status==='INSTALLING' || permission==='VIEWER'">
        <clr-icon shape="sync" size="16"></clr-icon>
        节点状态同步
      </button>
    </div>
  </clr-dg-action-bar>
  <clr-dg-column>名称</clr-dg-column>
  <clr-dg-column>IP</clr-dg-column>
  <clr-dg-column>CPU(核)</clr-dg-column>
  <clr-dg-column>CPU使用率(%)</clr-dg-column>
  <clr-dg-column>内存(MB)</clr-dg-column>
  <clr-dg-column>内存使用率(%)</clr-dg-column>
  <clr-dg-column>操作系统</clr-dg-column>
<!--  <clr-dg-column>角色</clr-dg-column>-->
  <clr-dg-column>监控</clr-dg-column>


  <clr-dg-row *ngFor="let node of nodes" [clrDgItem]="node">
    <clr-dg-cell style="cursor: pointer;color: #0079b8">
      <span class="badge badge-info" *ngIf="node.roles[0]==='master'">M</span>
      <span class="badge badge-success" *ngIf="node.roles[0]==='worker'">W</span>
      <a (click)="openInfo(node)">{{node.name}}</a>
    </clr-dg-cell>
    <clr-dg-cell >{{node.ip}}</clr-dg-cell>
    <clr-dg-cell>{{node.host_cpu_core}}</clr-dg-cell>
    <clr-dg-cell>
      <circle-progress
        [percent]="node.cpu_usage"
        [radius]="15"
        [outerStrokeWidth]="5"
        [innerStrokeWidth]="5"
        [space]="-5"
        [outerStrokeColor]="node.cpu_usage | progressColor"
        [innerStrokeColor]="'#A9A9A9'"
        [subtitleFontSize]="'0'"
        [titleFontSize]=10
        [unitsFontSize]=10
        [backgroundStrokeWidth]=-3
        [showSubtitle]=false
      ></circle-progress>
    </clr-dg-cell>
    <clr-dg-cell>{{node.host_memory}}</clr-dg-cell>
    <clr-dg-cell>
      <circle-progress
        [percent]="node.mem_usage"
        [radius]="15"
        [outerStrokeWidth]="5"
        [innerStrokeWidth]="5"
        [space]="-5"
        [outerStrokeColor]="node.mem_usage | progressColor"
        [innerStrokeColor]="'#A9A9A9'"
        [subtitleFontSize]="'0'"
        [titleFontSize]=10
        [unitsFontSize]=10
        [backgroundStrokeWidth]=-3
        [showSubtitle]=false
      ></circle-progress>
    </clr-dg-cell>
    <clr-dg-cell>{{node.host_os}} {{node.host_os_version}}</clr-dg-cell>
<!--    <clr-dg-cell>{{node.roles}}</clr-dg-cell>-->
    <clr-dg-cell (click)="toGrafana()"><img src="assets/images/grafana.svg" width="15"></clr-dg-cell>
  </clr-dg-row>

  <clr-dg-footer>

  </clr-dg-footer>

</clr-datagrid>
<clr-modal [(clrModalOpen)]="openView" clrModalSize="l">
  <h3 class="modal-title">主机时间校验</h3>
  <div class="modal-body" #hosts>
    <div class="clr-col-12" align="center" *ngIf="loadingTime">
        <span class="spinner spinner-lg loading">
          Loading...
        </span>
    </div>
    <table class="table" *ngIf="timeResult&&timeResult.data&&!loadingTime">
      <thead>
      <tr>
        <th>主机名</th>
        <th>时间</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let data of timeResult.data">
        <td>{{data.hostname}}</td>
        <td>{{data.date}}</td>
      </tr>
      </tbody>
    </table>
  </div>
</clr-modal>
